import './style/bangdingyinghangka.css';
import React from 'react';
import Navbar from '../component/Navbar';
import { InputItem, Picker, Modal } from 'antd-mobile';
import KcPicker from "../component/KcPicker";

const cityData = require('./data/cityData.json');

class BangDingYinHangKa extends React.Component {

    state = {
        modalData: [],
        modal2: false,
        title: null
    }

    componentDidMount() {
        const modalData = [
            { title: '中国银行（7775）', img: require('./img/tixian/icon1.png'), key: 0 },
            { title: '交通银行', img: require('./img/tixian/icon2.png'), key: 1 },
            { title: '支付宝', img: require('./img/tixian/icon3.png'), key: 2 },
            { title: '微信支付', img: require('./img/tixian/icon4.png'), key: 3 },
        ]
        this.setState({
            modalData
        })
    }
    goBack = () => {
        this.props.history.goBack();
    }
    change(e) {
        console.log(e)
        var a = e.find(val => {
            return cityData.map(item => {
                item.children.map(res => {
                    // eslint-disable-next-line no-unused-expressions
                    if (res.value === val) return item
                })
            })
        })
        console.log(a)

    }
    cityChange(e) {
        console.log(e)
    }
    render() {
        const { title } = this.state
        return (
            <div className='bangdingyinghangka'>
                {/* <Navbar onClick={this.goback} title='绑定银行卡' ></Navbar> */}
                <Navbar onClick={this.goBack} title='绑定银行卡' ></Navbar>

                <div className='scroll'>
                    <div className='yhkxx'>
                        银行卡信息
                      </div>
                    <div className='main'>
                        <div className='item'>
                            <span className='left'>姓名</span>
                            <InputItem
                                className="flex-1"
                                placeholder='输入持卡人姓名'
                                maxLength='10'
                            ></InputItem>
                        </div>
                        <div className='item'>
                            <span className='left'>身份证号</span>
                            <InputItem
                                className="flex-1"

                                placeholder='输入身份证号'
                                type='number'
                            ></InputItem>
                        </div>
                        <div className='item'>
                            <span className='left'>银行卡卡号</span>
                            <InputItem
                                className="flex-1"

                                placeholder='输入银行卡号'
                                type='bankCard'
                            ></InputItem>
                        </div>
                        <div className='item' style={{ borderBottom: "none" }}>
                            <span className='left'>选择银行</span>
                            <div onClick={() => {
                                this.setState({
                                    modal2: true
                                })
                            }} className='bangdingyinghangka-picker'>
                                <span>{title || "请选择银行"}</span>
                                <img alt='' src={require('./img/celue/right.png')} ></img>
                            </div>
                        </div>
                        <div className='item'>
                            {/* <span className='left'>开户地区</span>
                            <Picker extra="请选择(可选)"
                                onChange={(e) => this.change(e)}
                                data={cityData}
                            >
                                <div className='bangdingyinghangka-picker'>
                                    <span>请选择开户地区</span>
                                    <img alt='' src={require('./img/celue/right.png')} ></img>
                                </div>
                            </Picker> */}
                            <KcPicker city="开户地区" cityChange={(v) => this.cityChange(v)} />

                        </div>
                    </div>
                    <div className='main' style={{ marginTop: '1rem' }}>
                        <div className='item'>
                            <span className='left'>开户地址</span>
                            <InputItem
                                className="flex-1"

                                placeholder='输入开户地址'
                                maxLength='10'
                            ></InputItem>
                        </div>
                        <div className='item'>
                            <span className='left'>提现密码</span>
                            <InputItem
                                className="flex-1"

                                placeholder='输入提现密码'
                                type='number'
                            ></InputItem>
                        </div>
                    </div>
                    <span className='ts'>提示：一个会员最多绑定4个账号</span>
                </div>
                <div className='foot'>
                    <span>绑定</span>
                </div>

                <Modal
                    popup
                    visible={this.state.modal2}
                    animationType="slide-up"
                >
                    <div className='tixian-modal'>
                        {
                            this.state.modalData && this.state.modalData.map((v, k) => {
                                return (
                                    <div onClick={() => {
                                        this.setState({
                                            title: v.title,
                                            txfs: v.key,
                                            modal2: false
                                        })
                                    }} key={v + k} className='item'>
                                        <div className='left'>
                                            <img alt='' src={v.img}></img>
                                            <span>{v.title}</span>
                                        </div>
                                        <img className='right' src={this.state.txfs === v.key ? require('./img/tixian/xz.png') : require('./img/tixian/wxz.png')} alt=''></img>
                                    </div>
                                )
                            })
                        }
                    </div>
                </Modal>
            </div>
        )
    }
}

export default BangDingYinHangKa;